<template>
  <div class="cou">
    <div class="title">
      <van-sticky :offset-top="0">
        <div class="top">
          <p>
            <router-link to="newm">
              <van-icon @click="funq()" name="arrow-left" size="20" />
            </router-link>
            <span class="tit">交通银行</span>
          </p>
        </div>
      </van-sticky>
    </div>
    <div class="luckin">
      <p>
      luckin×交通银行信用卡，超值积分兑换小蓝杯~
      </p>
    </div>
    <div class="timel">
      <p>luckincoffee瑞幸咖啡 <span>2月5日</span> </p>
    </div>
    <div class="imgg">
        <img src="/homeimg/gband_1.png">
        <img src="/homeimg/jiaotong_1.png">

    </div>
    <div class="play">
          <span class="ptie">活动详情</span>
          <div class="pdiv">
             <p> <span> 活动时间:</span>即日起–2021年12月31日</p> 
             <p> <span> 活动对象:</span>交通银行太平洋信用卡主卡持卡人</p>
             <p> <span> 活动规则:</span> 10000积分兑换29元饮品券，11200积分兑换32元饮品，12600积分兑换35元饮品券。</p>
            <p> <span> 兑换方法1:</span>点击下图，即可兑换守</p>
            <img src="/homeimg/jiaotong_2.png">
            <p> <span> 兑换方法2:</span></p>
            <img src="/homeimg/jiaotong_3.png" alt="">
            <img src="/homeimg/jiaotong_4.png" alt="">

          </div>
    </div>
  </div>
</template>

<script>
export default {
     methods: {
    funq() {
      this.$router.push("/newm");
    }
  }
};
</script>

<style scoped>
.pdiv p{
  margin: 0.5rem;
}
.pdiv img{
  width: 3rem;
  margin-left: 0.15rem;
}
.pdiv p span{
  display: inline-block;
  background-color: #1b237e;
  color: white;
  width: 0.7rem;
  text-align: center;
}
.pdiv{
  border-radius:0.1rem;
  border: 1px solid gray; 
  padding-top: 0.1rem;
  width: 3.48rem;
  margin: auto;
  /* background-color: orange; */
  
}
.play{
  width: 3.58rem;
  margin: auto;
  /* text-align: center; */
  /* background-color: red; */
  height: 5rem;
}
.play .ptie{
  /* margin-top: 2rem; */
  color: #1b237e;
  display: block;
  font-size: 0.2rem;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  line-height: 0.5rem;
  width: 1.2rem;
  margin: auto;
  height: 0.5rem;
  text-align: center;
margin-bottom: 0.2rem;

}

/* .cou {
  background-color: #45a1d8;
} */
.title{
    background-color: white;
}
.top {
  background-color: white;
  width: 3.75rem;
  height: 0.5rem;
  left: 0.1rem;
  margin: auto;
}
.tit {
  font-size: 0.2rem;
  position: absolute;
  margin-left: 30%;
  top: 0.1rem;
}

.van-icon {
  height: 0.3rem;
  line-height: 0.3rem;
  top: 0.1rem;
}
.luckin{
  /* background-color: red; */
  width: 3.2rem;
  height: 0.85rem;
  margin: auto;
  font-size: 0.2rem;
  /* line-height: 0.85rem; */

}
.luckin p{
  /* line-height: 0.85rem; */
  padding-top: 0.15rem;
}
.timel{
  width: 3.32rem;
  height: 0.6rem;
  margin: auto;
  /* background-color: aqua; */

}
.timel p{
  /* background-color: aqua; */
  text-indent: 0.05rem;
  color: #1b237e;
}
.imgg{
  margin: auto;
  text-align: center;
}

</style>